<template>
  <div id="style22" class="app-container">
      用户修改
       <el-form label-width="120px">
         <el-form-item label="姓名">
             <el-col :span="8">
            <el-input v-model="user.name"/>
             </el-col>
         </el-form-item>

         <!-- <el-form-item label="性别">
             <el-col :span="8">
            <el-input v-model="user.gender"/>
             </el-col>
         </el-form-item> -->

         <el-form-item label="性别">
         <el-select v-model="user.gender" placeholder="请选择性别">
        <el-option
        v-for="item in genders"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        </el-option>
         </el-select>
        </el-form-item>

         <el-form-item label="手机号码">
             <el-col :span="8">
            <el-input v-model="user.phone"/>
            </el-col>
         </el-form-item>

         <!-- <el-form-item label="宠物">
             <el-col :span="8">
            <el-input v-model="user.pet"/>
            </el-col>
         </el-form-item> -->

         <el-form-item label="宠物">
         <el-select v-model="user.pet" placeholder="请选择宠物类型">
        <el-option
        v-for="item in petTypes"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        </el-option>
         </el-select>
        </el-form-item>

         <el-form-item>
            <el-button type="primary" @click="saveOrUpdate">保存</el-button>
         </el-form-item>
      </el-form>
  </div>
</template>

<script>
import user from '@/api/user'
export default {
  data() {
      return {
         user:{},//user对象
         genders: [{
          value: '男',
          label: '男'
         },
         {
          value: '女',
          label: '女'
         }],

         petTypes: [{
          value: '犬类',
          label: '犬类'
        },
        {//选择框数据
          value: '猫科',
          label: '猫科'
        },
        {//选择框数据
          value: '鸟类',
          label: '鸟类'
        },
        {//选择框数据
          value: '甲壳类',
          label: '甲壳类'
        },
        {//选择框数据
          value: '其他',
          label: '其他'
        }]


      }
   },
   created() {//页面渲染之前执行
      //获取路由id值
      //调用接口得到医院设置信息
      if(this.$route.params && this.$route.params.id) {
         const id = this.$route.params.id
         this.getUser(id)
      } else {
         //表单数据清空
         this.user = {}
      }
   },
   methods: {
      //根据id查询
      getUser(id) {
         user.getUser(id) 
            .then(response => {
               this.user = response.data
            })
      },
      //添加
      save() {
         user.saveUser(this.user)
            .then(response => {
               //提示
               this.$message({
                  type: 'success',
                  message: '添加成功!'
               })
               //跳转列表页面，使用路由跳转方式实现
               this.$router.push({path:'/user/list'})
            })
      },
      //修改
      update() {
         user.updateUser(this.user)
            .then(response => {
               //提示
               this.$message({
                  type: 'success',
                  message: '修改成功!'
               })
               //跳转列表页面，使用路由跳转方式实现
               this.$router.push({path:'/user/list'})
            })
      },
      saveOrUpdate() {
         //判断添加还是修改
         if(!this.user.id) { //没有id，做添加
            this.save();
         }else {//修改
            this.update()
         }
      }
   }

}
</script>

<style>

</style>